<template>
	<view>
		<Header></Header>
		<NavImg :imgSrc="imgSrc" :isFree="isFree"></NavImg>
		<Main :dataVal="obj" :name="name"></Main>
		<view class="bg"></view>
		<UlContent :ulData="ulData"></UlContent>
		<view class="foote-item">
			小贴士
		</view>
		<template v-for="item in tips">
			<view class="foote-item2" :key="item.tipname">{{item.tipname}}</view>
			<template v-for="itm in item.tipdescribe">
				<view class="foote-item3" :key="itm">
					{{itm}}
				</view>
			</template>
		</template>
		
		<view class="bg"></view>
		<Footer :NavData3="NavData3"></Footer>
	</view>

</template>

<script>
	import Header from './son/header.vue'
	import NavImg from './son/img.vue'
	import Main from './son/main.vue'
	import UlContent from './son/ulContent.vue'
	import Footer from './son/footer.vue'
	import request from '@/http/request2.js'
	export default {
		data() {
			return {
				imgSrc:'',
				isFree:'',
				ulData: [],
				name:'',
				NavData3: [],
				tips:[],
				obj:{
					name:'',
					collections:'',
					pageview:''
				},
			}
		},
		components: {
			Header,
			NavImg,
			Main,
			UlContent,
			Header,
			Footer
		},
		methods: {
			async getData(id) {
				const res = await request({
					url: '/search/menuDetail',
					method: "post",
					data: {
						_id: id
					}
				})
				this.imgSrc = res.message[0].vid;
				this.ulData = res.message[0].ingredient;
				this.name = res.message[0].name;
				this.obj.name = res.message[0].name;
				this.obj.collections = res.message[0].collections;
				this.obj.pageview = res.message[0].pageview;
				this.tips = res.message[0].tips;
				this.isFree = res.message[0].isFree;
				console.log(res,'-----')

			},
			async setNavData3(){
				const res = await request({url:"/vip/likeMenu"});
				// console.log(res.menus)
				this.NavData3 = res.menus;
			}
		},
		created() {
			this.setNavData3();
		},
		onLoad(option) {
			// console.log(option)
			this.getData(option.id)
		}
	}
</script>

<style scoped>
	.bg {
		background-color: rgb(246, 247, 248);
		height: 28rpx;
	}

	.click-img,
	.xing-img {
		width: 36rpx;
		height: 36rpx;
		vertical-align: middle;
	}

	.xing-img {
		margin-left: 40rpx;
	}

	.text-col {
		color: rgb(104, 104, 104);
		font-size: 30rpx;
		vertical-align: middle;
		margin-left: 14rpx;
	}

	.middle {
		text-align: center;
		margin-top: 41rpx;
	}

	.connect {
		display: flex;
		margin-top: 40rpx;
		padding-left: 32rpx;
		margin-bottom: 34rpx;
		justify-content: space-between;
	}

	.left-connect {
		font-weight: bold;
	}

	.right-connect {
		margin-right: 32rpx;
		color: orange;
	}

	ul {
		list-style: none;
		padding: 0;
		margin: 0 auto;
	}

	li>text {
		font-size: 28rpx;
		color: rgb(104, 104, 104);
		letter-spacing: 2rpx;
	}

	li {

		display: flex;
		justify-content: space-between;
		width: 680rpx;
		height: 72rpx;
		line-height: 72rpx;
		margin: 0 auto;
		border-top: 1px solid #eeeeee;
		border-bottom: 1px solid #EEEEEE;

	}

	.right-text {
		margin-right: 160rpx;
		display: inline-block;
		width: 100rpx;
		text-align: left;
	}

	.foote-item {

		font-size: 30rpx;
		font-weight: bold;
		padding-left: 32rpx;
		margin: 34rpx auto;
	}

	.foote-item2 {
		font-size: 28rpx;
		color: rgb(104, 104, 104);
		font-weight: bold;
		padding-left: 32rpx;
		margin: 20rpx auto;
	}

	.foote-item3 {
		font-size: 22rpx;
		color: rgb(109, 109, 109);
		padding-left: 54rpx;
		argin: 0 auto;
		width: 626rpx;
		padding-right: 10rpx;
		padding-bottom: 20rpx;
	}

	.foote-item4 {
		width: 626rpx;
		/* height: 228rpx; */
		font-size: 22rpx;
		color: rgb(112, 112, 112);
		margin: 0 auto;
	}

	.foote-item5 {
		width: 626rpx;
		/* height: 180rpx; */
		font-size: 22rpx;
		color: rgb(112, 112, 112);
		margin: 0 auto;
	}

	.scroll-item {
		width: 80rpx;
		height: 22rpx;
		/* position: relative; */
		position: absolute;
		top: 94px;
		right: 7px;
	}

	.text {
		margin-top: 30rpx;
	}

	/*  */

	.scroll-outer2 {
		display: flex;
		flex-wrap: wrap;
		margin-top: 28rpx;
		justify-content: space-between
	}

	.item-outer {
		width: 49%;
		margin-bottom: 20rpx;

	}

	.main-img {
		width: 95%;
		height: 220rpx;
		border-radius: 10rpx;
	}

	.item-text-one {
		font-size: 25rpx;
		font-weight: bold;
		width: 300rpx; //设置需要固定的宽度
		white-space: nowrap; //不换行
		text-overflow: ellipsis; //超出部分用....代替
		overflow: hidden; //超出隐藏
	}

	.item-text {
		display: flex;
	}

	.grey {
		color: rgb(177, 177, 177);
		font-size: 10px;
		vertical-align: middle;
	}

	.right {
		margin-left: 64rpx;
	}

	.img-one {
		width: 25rpx;
		height: 25rpx;
		vertical-align: middle;
		margin-left: 10rpx;
	}

	.last {
		margin-left: 32rpx;
		margin-right: 32rpx;

	}
</style>
